{__NOLAYOUT__}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/agent/manage/css/gongdan_info.css"/>
    <script type="text/javascript" src="/agent/manage/js/jquery.1.9.1.js" ></script>
    <script type="text/javascript" src="/agent/manage/js/rem.js" ></script>
    <script type="text/javascript" src="/agent/manage/js/swiper.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="/agent/manage/css/swiper-3.4.2.min.css"/>
    <title>工单详情</title>
</head>
<body>
<ul class="list_info">
    <li>
        <img class="tx" src="{$user.avatar}"/>
        <p class="order">订单号：<a href="/agent/manage/OrderInfo/ids/{$row.order_sn}"><span>{$row.order_sn}</span></a></p>
        <p class="question">{$row.content}</p>
        {if $row.img}
            <p class="imginfo">
                <div class="container">
                    <div class="swiper-container swiper1">
                        <div class="swiper-wrapper">
                            {foreach name="row.img" item="img"}
                                <div class="swiper-slide">
                                    <img style="width: 1.2rem;height: 1.2rem;" src="{$img}"/>
                                </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </p>
        {/if}

        <p class="infodate">
            <img src="/agent/manage/img/date.jpg"/>
            <span>{:date('Y-m-d H:i:s',$row.createtime)}</span>
        </p>
    </li>
    {if $list}
        {foreach name="list" item="val"}
            <li>
                <img class="tx" src="{$val.userid_text}"/>
                <p class="question">{$val.content}</p>
                {if $val.img}
                <p class="imginfo">
                <div class="container">
                    <div class="swiper-container swiper1">
                        <div class="swiper-wrapper">
                            {foreach name="val.img" item="img"}
                                <div class="swiper-slide">
                                    <img style="width: 1.2rem;height: 1.2rem;" src="{$img}"/>
                                </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
                </p>
                {/if}
                <p class="infodate">
                    <img src="/agent/manage/img/date.jpg"/>
                    <span>{:date('Y-m-d H:i:s',$val.createtime)}</span>
                </p>
            </li>
        {/foreach}
    {/if}
</ul>

{if $auth->userid == $row.create_userid}
    <div class="button">
        <a href="/agent/manage/close/id/{$row.id}"><div class="close ">关闭工单</div></a>
        <a href="/agent/manage/edit/id/{$row.id}"><div class="continue ">继续留言</div></a>
    </div>
{else}
    <div class="button1 button">
        <a href="/agent/manage/edit/id/{$row.id}"><div class="continue1 ">继续留言</div></a>
    </div>
{/if}
</body>
<script>
  $(function() {
    var winHeight = $(window).height();
    $(".mask").css("height", winHeight);
    $(".mask .container").css("margin-top", winHeight / 3);
    $(".tupian .swiper-slide").click(function(){
      $(".mask").show();
    });
    $(".cha").click(function(){
      $(".mask").hide();
      window.location.reload();
    });
  });
</script>
<script>
  $(function() {
    var swiper1 = new Swiper('.swiper1', {
//					设置slider容器能够同时显示的slides数量(carousel模式)。
//					可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
//					loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
      slidesPerView: 4.5,
      spaceBetween: 10,//slide之间的距离（单位px）。
      freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
      loop: false,//是否可循环
    });

  });
</script>
<!-- Swiper -->
<div class="swiper-container myswiper" id="origin-img">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
    <div class="upload"></div>
</div>
<script>
  //点击图片变大
  //判断图片是否为放大状态 放大是true 否则为false
  var swiperStatus = false;
  var swiper = new Swiper('.myswiper', {
    zoom: true,
    width: window.innerWidth,
    virtual: true,
    spaceBetween: 20,
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
    },
    on: {
      //放大后轮播图点击
      click: function() {
        //遮罩层消失
        $('#origin-img').fadeOut('fast');
        //清空遮罩层的内容
        this.virtual.slides.length = 0;
        this.virtual.cache = [];
        //标记为未放大状态
        swiperStatus = false;
      },
    },
  });
  //点击页面中轮播图图片
  $(document).delegate(".swiper1 img", "click", function() {
    //获取到当前点击的是第几张图片
    clickIndex = $(this).parent().index();
    //获取图片的外层div,因为外层轮播的图片循环的是这个div
    var imglist = $(this).parents(".swiper1").find(".swiper-slide")
    $(imglist).each(function(i, v) {
      console.log($(v).find("img").attr("src"))
      //获取当前点击图片的图片地址
      var imgs = $(v).find("img").attr("src")
      //将图片地址画入swiper中
      swiper.virtual.appendSlide('<div style="background:#000;" class="swiper-zoom-container"><img src="' + imgs + '" /><div class="cha">×</div></div>');
    })
    //根据当前点击的图片位置让放大的图片定位到第几张图片
    swiper.slideTo(clickIndex);
    //遮罩层弹出
    $('#origin-img').fadeIn('fast');
    //标记为放大状态
    swiperStatus = true;
  });
  //切换图状态禁止页面缩放
  document.addEventListener('touchstart', function(event) {
    if(event.touches.length > 1 && swiperStatus) {
      event.preventDefault();
    }
  });
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function(event) {
    var now = (new Date()).getTime();
    if(now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false)
  document.addEventListener('touchmove', function(e) {
    if(swiperStatus) {
      e.preventDefault();
    }
  });
</script>
</html>